<template>
    <div class="page">
        <div class="main-title">
            <div class="left">我的余额</div>
        </div>

        <div class="value-info flex">
            <div class="value-item">
                <div style="display: flex">
                    <img class="main-content-img" src="@/assets/img/newImg/qianbao.png" alt="">
                    <div>
                        <div class="main-content-num"><span>2400.</span><span class="main-content-zero">00</span></div>
                        <div class="main-content-tips">我的余额</div>
                    </div>
                </div>

            </div>
            <div class="btn-applay" @click="$router.push('/my_tixian')">申请提现</div>

        </div>

        <div class="page-ctx">
            <div class="wrap">
                <div class="inner">
                    <div class="tab-box">
                        <div class="tab-item" v-for="(item, index) in tab_list" :key="index" @click="tab_select = item"
                            :class="item.title == tab_select.title ? 'active' : ''">
                            {{ item.title }}
                        </div>
                    </div>

                    <div class="bottom-info">
                        <div class="list-wrap" v-if="tab_select.status == 0">
                            <div class="jilu-list">
                                <div class="item item-title">
                                    <div class="item-1">订单号</div>
                                    <div class="item-2">退款金额</div>
                                    <div class="item-3">退款时间</div>
                                    <!-- <div class="item-4">操作</div> -->
                                </div>
                                <div class="item-box" v-for="(item, index) in list_jilu" :key="index"
                                    @click="$router.push(`/order-detail?order_id=${order.id}`)">
                                    <div class="item item_other">
                                        <div class="item-1">
                                            <div class="text-1">{{ item.remark }}</div>
                                        </div>
                                        <div class="item-2 val"
                                            :class="{ plus: item.type == 1, minus: item.type == 2 }">
                                            {{ item.jifen }}
                                        </div>
                                        <div class="item-3">{{ item.createdTime }}</div>
                                        <!-- <div class="item-4">{{ item.createdTime }}</div> -->
                                    </div>
                                </div>
                            </div>

                            <div class="pagination-box" v-if="count">
                                <el-pagination background layout="total, prev, pager, next" :total="count"
                                    :current-page="pagination.page" :page-size="pagination.pageNum"
                                    @current-change="mix_current_change">
                                </el-pagination>
                            </div>
                        </div>

                        <div v-if="tab_select.status == 1">
                            <div class="item-list">
                                <div>
                                    <div class="item-list-name">提现</div>
                                    <div class="item-list-time">2024-01-01 11:22:00</div>
                                </div>
                                <div class="item-list-num">
                                    -￥200
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "jifen-jilu",
    components: {},
    data() {
        return {
            tab_select: { title: "余额明细", status: "0" },
            tab_list: [
                { title: "余额明细", status: "0" },
                { title: "提现记录", status: "1" },
            ],
            list_jilu: [],

            pagination: {
                page: 1,
                pageNum: 10,
            },
            count: 0,
            info: {},
        };
    },
    computed: {
        // ...mapState([""]),
    },
    watch: {
        tab_select() {
            this.setView();
        },
    },
    created() {
        this.setView();
    },
    methods: {
        setView() {
            this.$api({
                url: "/service.php",
                method: "get",
                data: {
                    action: "jiFen_lists",
                    ...this.pagination,
                    type: this.tab_select.status, //类型：0全部 1收入 2 支出
                },
            }).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    this.info = data;
                    this.list_jilu = data.list;
                    this.count = data.count;
                }
            });
        },
    },
};
</script>

<style scoped lang="less">
.item-list {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #707070;

    .item-list-name {
        font-weight: 400;
        font-size: 18px;
        color: #2C2C2C;
        line-height: 20px;
    }

    .item-list-time {
        font-weight: 400;
        font-size: 14px;
        color: #747474;
        line-height: 20px;
        margin-top: 10px;
    }

    .item-list-num {
        font-weight: bold;
        font-size: 16px;
        color: #6AB13D;
    }
}

.main-content-img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.main-content-num {
    font-weight: bold;
    font-size: 28px;
    color: #484848;
}

.main-content-zero {
    font-size: 20px;
}

.main-content-tips {
    font-weight: 400;
    font-size: 14px;
    color: #606060;
}

.btn-applay {
    width: 94px;
    height: 40px;
    background: #EF1F1F;
    border-radius: 4px 4px 4px 4px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin-left: 81px;
}

.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #009f39;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
    }

    .page-ctx {
        margin-top: 24px;
        padding: 32px 32px 55px 32px;
        background: #fff;
    }
}

.value-info {
    border-top: 1px solid #EAEEF1;

    background: #ffffff;

    .value-item {
        height: 124px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 31px;


        .value {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 32px;
            color: #EF1F1F;
        }

        .text-box {
            margin-top: 20px;
            display: flex;
            align-items: center;

            .text {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
            }

            .btn {
                margin-left: 16px;
                width: 84px;
                height: 31px;
                background: #ffffff;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #ffaa2a;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #ffaa2a;
            }
        }
    }
}

.tab-box {
    margin-top: 24px;
    flex: 2;
    // border-bottom: 1px solid #eee;

    display: flex;
    align-items: center;

    .tab-item {
        position: relative;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 3px solid transparent;
        margin-right: 55px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #333333;


        &.active {
            border-bottom: 3px solid #EF1F1F;
            font-weight: bold;
            color: #EF1F1F;
        }
    }
}

.bottom-info {
    margin-top: 20px;
    margin-bottom: 50px;
}

.jilu-list {
    margin-bottom: 30px;
    border: 1px solid #e5e5e5;

    .item {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        &:last-child {}

        &.item-title {
            background: #f5f5f5;
            border-bottom: 1px solid #e5e5e5;
            font-size: 14px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #666666;
        }

        .item-1 {
            text-align: left;
            flex: 1;
            display: flex;
            align-items: center;

            .img-box {
                img {
                    // width: 88px;
                }
            }

            .info-box {
                padding-left: 15px;

                .title {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    line-height: 24px;
                }

                .info {
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }

        .item-2 {
            width: 270px;

            &.val {
                color: #EF1F1F;
                ;
            }
        }

        .item-3 {
            width: 270px;
        }

        .item-4 {
            width: 150px;
        }
    }
}

.plus {
    color: #009f39;
    font-weight: bold;
}

.minus {
    color: #52c41a;
    font-weight: bold;
}
</style>

<style scoped lang="less" src="@/assets/h5css/huodong/pointsDetail.less"></style>